<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h3>现在的时间是：{{time}}</h3>
        <h2>显示格式化后的时间</h2>


        <!-- 计算属性实现 -->
        <h3>现在的时间是：{{fmttime}}</h3>

        <!-- methods实现 -->
        <h3>现在的时间是：{{gettime()}}</h3>

        <!-- 过滤器实现 -->
        <!-- 过滤器的参数传递，不写默认传管道符前面的，小括号写了参数传管道符前面的和小括号里面的 -->
        <!-- 过滤器从左到右逐级运行，参数也是逐级传递 -->
        <h3>现在的时间是：{{time | filter | slice}} </h3>
    </div>

    <div id="gen">
        <!-- 证明局部的 -->
        <!-- <h3>现在的时间是：{{time | filter | slice}} </h3> -->

        <h1 :x="msg | slice">SWPU</h1>

        <h2>{{msg|slice}}</h2>
    </div>

    <script>
        // 全局过滤器，写在vm实例之前
        Vue.filter("slice", function (value) {
            return value.slice(0, 4)
        })

        const vm = new Vue({
            el: "#root",
            data: {
                time: Date.now(),
            },
            methods: {
                gettime() {
                    return dayjs(this.time).format("YYYY--MM--DD HH:mm:ss")
                }
            },
            computed: {
                fmttime() {
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            // 局部过滤器
            filters: {
                filter(value) {
                    return dayjs(value).format("YYYY年MM月DD日 HH:mm:ss")
                },

                // slice(value) {
                //     return value.slice(0, 4)
                // },
            }
        })
        const vm2 = new Vue({
            el: "#gen",
            data: {
                msg: "你好SWPU",
            }

        })

    </script>

</body>

</html>